<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0 14px;
}
.head-container .mes{
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 160px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.second-select .js-selected-q{
    margin-left: 0px;
    padding-left: 25px;
  }
  .third-select .js-selected-q{
    margin-left: 0px;
    padding-left: 50px;
  }
  .js-selected-q b{
    width: auto!important
  }
  .js-selected-project .js-selected-project-box .js-selected-q{
    background-position: 170px -30px;
  }
  .js-selected-project .js-selected-project-box div.active{
    background-position: 170px 26px;
  }
  .js-selected-project .js-selected-project-box .js-selected-q b{
    margin-left: 10px;
  }
  .second-select>li b{
    text-indent: 0em;
  }
  .first-select .ellipsis-1{
    min-width: 175px;
    max-width: 150px;
    padding-right: 45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .second-select .ellipsis-1{
    min-width: 140px;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .third-select b{
    min-width: 120px;
    max-width: 80px;
    padding-right: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .select-ul .date-ul {
    position: absolute;
    left: 0;
    top: 32px;
    list-style: none;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: 0;
    width: 100%;
    max-height: 280px;
    overflow: hidden;
    overflow-y: scroll;
    background-color: #fff;
    z-index: 999;
}
.select-ul .date-ul li {
    position: relative;
    line-height: 28px;
    height: 28px;
    text-indent: .8em;
    color: #333;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

.el-table .cell{
  /* padding: 10px 0; */
  line-height: 46px;
}

.el-table thead.is-group th{
  background: #f0f2ff;
}
.el-table th>.cell{
  color: #a5aab7;
  font-weight: 500;
}
.el-table tr:nth-child(2n){
  background: #f9f9f9;
}
.el-table tr:hover{
  background: #f0f0f7;
}

.el-table td div{
  border-bottom:1px dotted #eee;
}
.el-table td div:last-child{
  border-bottom:none;
}

</style>

<section id="report_bi">
  <!-- 右边 -->
  <div class="js-selected-project ">
    <div class="css-pack-up"></div>
    <div class="js-selected-project-bg">
    </div>
    <div class="js-selected-project-box">
      <div class="select-project"><!--右侧公司--></div>
    </div>
  </div>

  <hl-page-header title="账单月报">
    <hl-button type="outline" @on-click="excl" v-if="quanxian.indexOf('c179') > -1">导出</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>账单时间</p>
        <div class="pull-left relative" style="margin-right: 10px;">
          <label class="icon-Gm-calendar relative" @click="ymshow">
            <input type="text" readonly="readonly" placeholder="" class="global_ipt_text imebill" v-model="timebill">
          </label>
          <div class="absolute bg-fff" style="left: 0; top: 100%;zIndex: 999999;" v-if="ymflag" @click="cancelBubbleTrue">
            <div class="select-ul pull-left" style="width:70px;">
              <span class="select-name br-4 box-i-shadow cursor timebill" ref="yearhtml">年</span>
              <div class="date-ul">
                <li v-for="item in yearli" @click="getyearfn(item)">{{item}}</li>
              </div>
            </div>
            <div class="select-ul pull-left" style="width:70px;">
              <span class="select-name br-4 box-i-shadow cursor timebill" ref="monthhtml">月</span>
              <div class="date-ul">
                <li v-for="item in month" @click="getmonthfn(item)">{{item | toZero}}</li>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flow">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input
            v-model="keyword"
            autocomplete="off"
            type="text"
            class="global_ipt_text"
            placeholder="合同名称/合同编号"
            style="width:240px"
           />
        </div>
      </div>

      <div class="button-group">
        <hl-button @on-click="searchget" size="mini">查询</hl-button>
        <hl-button @on-click="resetData" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <!-- <div class="rent-content br-4 global_table" style="padding:0;" v-if="data.length">
    <table>
      <thead>
        <tr>
          <th colspan="19">{{setyear}}年{{setmonth}}月应收账单</th>
          <th colspan="3">合同发票合计</th>
          <th colspan="3">合同账单金额合计</th>
        </tr>
        <tr class="global_table_title">
          <th>序</th>
          <th>项目</th>
          <th>楼宇</th>
          <th>楼层</th>
          <th>单元号</th>
          <th>面积(m²)</th>
          <th>合同编号</th>
          <th>合同名称</th>
          <th>租赁期限</th>
          <th>付款方式</th>
          <th>账单开始日</th>
          <th>账单结束日</th>
          <th>本期收款日</th>
          <th>本期应收</th>
          <th>本期已收</th>
          <th>本期未收</th>
          <th>开票金额</th>
          <th>不含税金额</th>
          <th>税额</th>
          <th>累计开票金额</th>
          <th>累计不含税开票金额</th>
          <th>累计税额</th>
          <th>累计应收</th>
          <th>累计实收</th>
          <th>累计未收</th>
        </tr>
      <thead>
    </table>
  </div>

  <div class="rent-content br-4 global_table" style="padding:0;" v-if="data.length">
    <table>
      <tbody>
        <tr v-for="(item, index) in data" class="global_table_item">
          <td>{{index+1 | toZero}}</td>
          <td>
            <div class="table-list" :class="{'border-dashed': index0 < item.unitInfos.length-1}" v-for="(item0, index0) in item.unitInfos">{{item0.projectName}}</div>
          </td>
          <td>
            <div class="table-list" :class="{'border-dashed': index0 < item.unitInfos.length-1}" v-for="(item0, index0) in item.unitInfos">{{item0.buildingName}}</div>
          </td>
          <td>
            <div class="table-list" :class="{'border-dashed': index0 < item.unitInfos.length-1}" v-for="(item0, index0) in item.unitInfos">{{item0.floorName}}</div>
          </td>
          <td>
            <div class="table-list" :class="{'border-dashed': index0 < item.unitInfos.length-1}" v-for="(item0, index0) in item.unitInfos">{{item0.unitName}}</div>
          </td>
          <td>
            <div class="table-list" :class="{'border-dashed': index0 < item.unitInfos.length-1}" v-for="(item0, index0) in item.unitInfos">{{item0.unitAcreage | formatNum}}</div>
          </td>
          <td>{{item.contractCode || '--'}}</td>
          <td>{{item.contractName || '--'}}</td>
          <td>{{item.rentDuration}}</td>
          <td>押{{item.depositPeriod}} 付{{item.paymentPeriod}}</td>
          <td>{{item.billBeginDate | UTCdate}}</td>
          <td>{{item.billEndDate | UTCdate}}</td>
          <td>{{item.billBalanceTime | UTCdate}}</td>
          <td>{{item.billAmountReceive | formatNum}}</td>
          <td>{{item.billAmountPayed | formatNum}}</td>
          <td>{{item.billAmountTpay | formatNum}}</td>
          <td>{{item.invoiceAmount | formatNum}}</td>
          <td>{{item.taxExcludedAmount | formatNum}}</td>
          <td>{{item.taxAmount | formatNum}}</td>
          <td>{{item.contractInvoiceAmount | formatNum}}</td>
          <td>{{item.contractTaxExcludedAmount | formatNum}}</td>
          <td>{{item.contractTaxAmount | formatNum}}</td>
          <td>{{item.contractAmountReceive | formatNum}}</td>
          <td>{{item.contractAmountPayed | formatNum}}</td>
          <td>{{item.contractAmountTpay | formatNum}}</td>
        </tr>
      </tbody>
    </table>
  </div> -->

    <el-table :data="data" height="400" border  style="width: 100%">
      <el-table-column prop="date" :label="tHeadTitle" width="70" align="center" class="first-tHead">
        <el-table-column type="index" label="序" width="70" align="center"></el-table-column>
        <el-table-column  prop="unitInfos" label="项目" width="180" align="center">
          <template slot-scope="scope"><div v-for="(item,i) in scope.row.unitInfos">{{ item.projectName }}</div></template>
        </el-table-column>
        <el-table-column  prop="date" label="楼宇" width="180" align="center">
          <template slot-scope="scope"><div v-for="(item,i) in scope.row.unitInfos">{{ item.buildingName }}</div></template>
        </el-table-column>
        <el-table-column  prop="date" label="楼层" width="180" align="center">
          <template slot-scope="scope"><div v-for="(item,i) in scope.row.unitInfos">{{ item.floorName }}</div></template>
        </el-table-column>
        <el-table-column  prop="date" label="单元号" width="180" align="center">
          <template slot-scope="scope"><div v-for="(item,i) in scope.row.unitInfos">{{ item.unitName }}</div></template>
        </el-table-column>
        <el-table-column  prop="date" label="面积(m²)" width="180" align="center">
          <template slot-scope="scope"><div v-for="(item,i) in scope.row.unitInfos">{{ item.unitAcreage | formatNum }}</div></template>
        </el-table-column>
        <el-table-column  prop="contractCode" label="合同编号" width="180" align="center"></el-table-column>
        <el-table-column  prop="contractName" label="合同名称" width="360" align="center"></el-table-column>
        <el-table-column  prop="rentDuration" label="租赁期限" width="180" align="center"></el-table-column>
        <el-table-column  prop="depositPeriod" label="付款方式" width="180" align="center"></el-table-column>
        <el-table-column  prop="billBeginDate" label="账单开始日" width="180" align="center"></el-table-column>
        <el-table-column  prop="billEndDate" label="账单结束日" width="180" align="center"></el-table-column>
        <el-table-column  prop="billBalanceTime" label="本期收款日" width="180" align="center"></el-table-column>
        <el-table-column  prop="billAmountReceive" label="本期应收" width="180" align="center"></el-table-column>
        <el-table-column  prop="billAmountPayed" label="本期已收" width="180" align="center"></el-table-column>
        <el-table-column  prop="billAmountTpay" label="本期未收" width="180" align="center"></el-table-column>
        <el-table-column  prop="invoiceAmount" label="开票金额" width="180" align="center"></el-table-column>
        <el-table-column  prop="taxExcludedAmount" label="不含税金额" width="180" align="center"></el-table-column>
        <el-table-column  prop="taxAmount" label="税额" width="180" align="center"></el-table-column>
      </el-table-column>
      <el-table-column  prop="contractInvoiceAmount" label="合同发票合计" width="180" align="center" class="first-tHead">
        <el-table-column  prop="contractInvoiceAmount" label="累计开票金额" width="180" align="center"></el-table-column>
        <el-table-column  prop="contractTaxExcludedAmount" label="累计不含税开票金额" width="180" align="center"></el-table-column>
        <el-table-column  prop="contractTaxAmount" label="累计税额" width="180" align="center"></el-table-column>
      </el-table-column>
      <el-table-column  prop="contractInvoiceAmount" label="合同账单金额合计" width="180" align="center" class="first-tHead">
        <el-table-column  prop="contractAmountReceive" label="累计应收" width="180" align="center"></el-table-column>
        <el-table-column  prop="contractAmountPayed" label="累计实收" width="180" align="center"></el-table-column>
        <el-table-column  prop="contractAmountTpay" label="累计未收" width="180" align="center"></el-table-column>
      </el-table-column>
    </el-table>

    <div class="user-page ptb-10 clearfix" v-show="data.length">
        <div class="pull-left report_bi-page-num user-page-num">
          <span class="font-14">共<i>{{num}}</i>条记录</span>
          <span>每页
          <hl-select :data="pageTcount" v-model="pagecount" width="80" @on-change="pageFY"></hl-select>
            条
          </span>
        </div>
        <div class="pull-right">
          <ul class="page" id="page"></ul>
        </div>
    </div>

    <a href="" class="export-click inline" style="height:100px;width:100px;"></a>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/report_bi/scripts/report_yy.js" charset="utf-8"></script>

<style>
  .border-dashed {
    border-bottom: 1px dotted #eee;
  }
  .table-list {
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
  }
</style>
